<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画实现无缝滚动图片</title>
    <style>
        #picContent {

            position:relative;

            overflow-x:auto;

            width:100%;

            height:400px;

            margin:0 0;

        }

        #picContent ul {

            position:absolute;

            left:0;

            top:0;

            display:flex;

            flex-wrap:nowrap;

            overflow-x:scroll;

        }
        #picContent ul li {

            float:left;

            width:200px;

            min-height:400px;

            margin-right:20px;

            margin-top:10px;

            background:#0ff;

            text-align:center;

            list-style:none;

        }
    </style>
</head>
<body>
<div class="show-pic">

    <div class="title">

        <h2>图片展示</h2>

    </div>

    <div id="picContent"class="pic-content">

        <ul>

            <li>图片1</li>

            <li>图片2</li>

            <li>图片3</li>

            <li>图片4</li>

            <li>图片5</li>

            <li>图片6</li>

            <li>图片7</li>

            <li>图片8</li>

            <li>图片9</li>

            <li>图片10</li>

        </ul>

    </div>

</div>
</body>
